<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>ajax容易忽视的重点</title>
  <style type="text/css">
    #btn{
      width: 200px;
      height: 200px;
      background: red;
      border-radius: 20px;
      text-align: center;
      line-height: 200px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!--
    * 如何取消一个ajax请求 ----abort()方法--取消当前请求。
    场景：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
    然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
    //需求用户可以再次点击的时候取消之前的请求。
      * disabled 禁止用户点击，操作按钮，表单项的时候只是针对click事件，并没有对touch事件作出处理。
  -->

  <button id="btn">按钮</button>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
   $(function () {
     let isSend = false;
     let xhr = null;
     $('#btn').on('touchstart',function () {
       if (isSend){
         return
       }
       isSend = true
        $(this).css('background','gray')
       setTimeout(function () {
         //只能限制click事件，不能限制touch事件
         // $('#btn').prop('disabled',true)
         $('#btn').css('background','red')
         isSend = false
       },2000)
       if (!xhr){
         xhr = sendXml();
       }else {
         xhr.abort()
         xhr = sendXml()
       }
     })


     function sendXml() {
       let xhr = null;
       xhr = $.ajax({
         type: 'GET',
         url: 'http://localhost:3000/',
         dataType: 'json',
         success: function (data) {
           console.log(data)
         },
         error: function (err) {
           console.log(err);
         }
       })

       return xhr;
     }
   })

</script>
</body>
</html>
